<template>
  <div class="fullscreen-video-container">
    <video class="fullscreen-video" autoplay loop muted>
      <source src="https://staticmedia.remo-ai.com/2092f32ad22671eea8845017f1e80102/30ae1b9084f54dcf9588352faa176f96-260ba31fdc020edd6e67247410450adf-4k.mp4" type="video/mp4">
    </video>

    <div class="content-over-video">
      <div>
        <p style="font-size: 40px; font-weight: bold; margin-bottom: 20px;">Explore</p>
      </div>
      <span style="font-size: 15px;">Explore OBSBOT products' tutorials and usage cases</span>
    </div>
  </div>

  <div class="content">
    <ul>
      <li v-for="(item, index) in (titleData as any)" :key="index">
        <img :src="item.src" alt="">
        <span style="font-size: 17px; font-weight: bold;">{{ item.title }}</span>
      </li>
    </ul>
  </div>


  <Footer/>



  
</template>


<script lang="ts">
import { reactive,ref, toRefs } from 'vue';
import { getProductList } from '@/api/api';

export default {

  setup(){
    const data = reactive({
      titleData: ref([]),
    })


    getProductList('').then((res: any) => {
      data.titleData = res._rawValue.title
      console.log('test', data.titleData);
      
    }).catch((err: any) => {
      console.log(err + '请求失败')
    })

    return{
      ...toRefs(data)
    }
  }
}




</script>


<style scoped>
.fullscreen-video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.content-over-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* 确保内容在视频上方显示 */
  color: white; /* 示例：将内容文本颜色设置为白色 */
  text-align: center; /* 示例：居中对齐内容 */
}




.content {
  margin-top: 100px;
  margin-left: 338px;
  margin-bottom: 200px;
}

.content ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  margin-left: 205px;
}

.content ul li {
  position: sticky;
  width: 300px;
  height: 380px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  text-align: center;
  margin-bottom: 50px;
  transition: all 0.5s;
}

.content ul li:hover {
  transform: translateY(-10px);
}

.content img {
  height: 50%;
  width: 50%;
  margin-left: 78px;
  margin-top: 73px;
  margin-bottom: 40px;
}




</style>